<template>
    <div style="background-color:#ffffff">
        <div>
            <router-link to="/User/List">
                <el-button type="info" icon="el-icon-arrow-left" size="mini">返回</el-button>
            </router-link>
            <h6> * 新增用户或者重置密码后的初始密码为：123456</h6>
        </div>
            <el-row>
              <el-col>
                <el-form :model="Edit" ref="Edit" :rules="rules" label-width="100px" label-position="top" :inline="true" size="medium">
                    <el-form-item label="用户名（必填）" prop="UserName">
                      <el-input placeholder v-model="Edit.UserName"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="Phone1">
                      <el-input placeholder v-model="Edit.Phone1"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名（必填）" prop="FullName">
                      <el-input placeholder v-model="Edit.FullName"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="NickName">
                      <el-input placeholder v-model="Edit.NickName"></el-input>
                    </el-form-item>
                    <el-form-item label="Email" prop="Email1">
                      <el-input placeholder v-model="Edit.Email1"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="Address1">
                      <el-input placeholder v-model="Edit.Address1"></el-input>
                    </el-form-item>
                    <el-form-item label="学历" prop="Education"> 
                      <el-input placeholder v-model="Edit.Education"></el-input>
                    </el-form-item>
                    <el-form-item label="毕业院校" prop="School">
                      <el-input placeholder v-model="Edit.School"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="IDNumber">
                      <el-input placeholder v-model="Edit.IDNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="银行账号" prop="BankAccount">
                      <el-input placeholder v-model="Edit.BankAccount"></el-input>
                    </el-form-item>
                  <el-form-item label="部门" prop="fk_Department">
                    <el-select v-model="Edit.fk_Department"  style="width:100%;">
                      <el-option v-for="(item,index) in TypeList.UserDepartment" :key="index" :value="item.pk_Department" :label="item.DepartmentName"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="性别" prop="Sex">
                    <el-select v-model="Edit.Sex"  style="width:100%;">
                      <el-option label="男" :value="0"></el-option>
                      <el-option label="女" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="职位" prop="Position">
                    <el-select v-model="Edit.Position"  style="width:100%;">
                      <el-option v-for="(item,index) in TypeList.UserPosition" :key="index" :value="item.pk_Position" :label="item.Title"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="角色" prop="RoleValue">
                    <el-select v-model="Edit.RoleValue" style="width:100%;">
                     <el-option v-for="(item,index) in TypeList.RoleName" :key="index" :value="item.pk_Name" :label="item.RoleName_CHS"></el-option>
                    </el-select>
                  </el-form-item>
                   <el-form-item label="工资" prop="Wages">
                      <el-input placeholder v-model="Edit.Wages"></el-input>
                    </el-form-item>
                     <el-form-item label="入职时间" prop="EntryTime">
                      <template>
                        <el-date-picker 
                          v-model="Edit.EntryTime"
                          type="datetime"
                          placeholder="选择日期时间"
                           style="width:100%;"
                        ></el-date-picker>
                      </template>
                    </el-form-item>
                    <el-form-item label="生日" prop="Birthday">
                      <template>
                        <el-date-picker
                          v-model="Edit.Birthday"
                          type="datetime"
                          placeholder="选择日期时间"
                           style="width:100%;"
                        ></el-date-picker>
                      </template>
                    </el-form-item>
                    
                    <el-form-item label="禁用">
                      <template>
                        <el-checkbox v-model="Edit.IsLock" :value="Edit.IsLock"></el-checkbox>
                      </template>
                    </el-form-item>
                    <el-form-item label="上传头像">
                      <el-upload
                      style="border:1px solid #c0c4cc;width:180px;height:180px;overflow:hidden;"
                      class="avatar-uploader"
                      action="/HrApi/Update/Upload"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess">
                      <img  v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    </el-form-item>
                </el-form>
              </el-col>
            </el-row>
        <div>
        <el-button type="primary" size="small" @click="GetSave('Edit')" icon="el-icon-check">保存</el-button>
        <el-button icon="el-icon-close" @click="$router.go(-1)" size="small">取消 </el-button>
    </div>
    </div>
</template>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 10px;
}
.el-form-item {
  width: 49%;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
<script>
export default {
    data() {
      return {
        Edit:{
          UserName:"",
          Phone1:"",
          FullName:"",
          NickName:"",
          Email:"",
          Address1:"",
          Education:"",
          School:"",
          IDNumber:"",
          BankAccount:"",
          fk_Department:"",
          Sex:"",
          position:"",
          RoleValue:"",
          Wages:"",
          EntryTime:"",
          Birthday:""
        },
        TypeList:[],
        Type:'Add',
        imageUrl:'',
        rules:{
          UserName:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
           Phone1:[
            {required:true,message:'请输入内容',trigger:'blur'},          
          ],
           FullName:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
           Email1:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
           Address1:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
           Education:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
          School:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
          IDNumber:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
          BankAccount:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
          fk_Department:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
          position:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
           RoleValue:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
           Wages:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
           EntryTime:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
           Birthday:[
             {required:true,message:'请输入内容',trigger:'blur'}
          ],
        }
      }
    },
    mounted(){
    //获取类型
      this.$axios({
      url: '/HrApi/UserList/GetTypeList',
      method: 'GET'
    }).then(res => {
      this.TypeList = res.data.data
    });
    //修改
    if (Object.keys(this.$route.query).length) {
      //编辑
      this.Type = "Edit";
      this.$axios({
        url: '/HrApi/UserList/GetUserInfo',
        method: 'GET',
        params: {
          NameID: this.$route.query["id"],
          //Type: this.Type
        }
      }).then(res => {
        if (!res.data.code) {
          this.Edit = res.data.data
          //ImgDt
          this.imageUrl='data:image/jpeg;base64,'+res.data.ImgDt;
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  },
  methods:{
    GetSave(Edit){
        this.$refs[Edit].validate((valid) => {
        if (!valid) {
          return false;
        }
        //执行请求
        this.$axios({
          url: '/HrApi/UserList/UpdateUserList',
          method: "POST",
          data: this.$Qs.stringify({
            User: JSON.stringify(this.Edit),
            Type: this.Type,
            pk_User:this.$store.state.UserInfo.pk_User,
          })
        }).then(res => {
          if (!res.data.code) {
            //添加成功，重置表单
            this.$message.success(res.data.msg)
            if(this.Type=="Add"){
              this.$refs[Edit].resetFields();
              
            }
            
          } else {
            this.$message.error(res.data.msg)
          }
        })
      })
    },
    //上传头像
    handleAvatarSuccess(res,file){
      if(!res.code){
        this.$message.success("上传成功")
        this.imageUrl = URL.createObjectURL(file.raw);
        this.Edit.ImagePath1=res.data
      }
    }
  }
}
</script>